<template>
    <div class="formData-management">
        <div class="table-wrapper" v-show="showformData">
            <!--            <el-button type="primary" size="mini" @click="showformDataFrom">添加商品</el-button>-->
            <el-table
                    v-loading="loading"
                    :data="formData"
                    style="width: 100%;font-size: 12px">
                <el-table-column
                        label="订单号"
                        width="200"
                        prop="orderId">
                </el-table-column>
                <el-table-column
                        label="桌号"
                        width="100"
                        prop="buyerAddress">
                </el-table-column>
                <el-table-column
                        label="用户昵称"
                        width="150"
                        prop="buyerName">
                </el-table-column>
                <el-table-column
                        label="openid"
                        width="150"
                        prop="buyerOpenid">
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        width="140"
                        prop="createTime">
                    <template slot-scope="scope" v-if="scope.row.createTime">
                        {{scope.row.createTime.substr(0,19).replace('T',' ')}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="金额"
                        width="70"
                        prop="orderAmount">
                    <template slot-scope="scope">
                        {{scope.row.orderAmount}}元
                    </template>
                </el-table-column>
                <el-table-column
                        label="支付状态"
                        width="70"
                        prop="payStatus">
                    <template slot-scope="scope">
                        {{scope.row.payStatus==1?'已支付':'未支付'}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="订单状态"
                        width="100"
                        prop="orderStatus">
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.orderStatus==0"
                                size="mini"
                                type="success"
                                @click="handleOrder(scope.$index, scope.row)">处理订单
                        </el-button>
                        <el-button
                                v-else
                                size="mini"
                                type="info">已处理
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        width="260"
                        align="right">
                    <template v-slot:header>
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"
                                @input="getPage"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="orderDetail(scope.$index, scope.row)">详情
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper">
                <el-pagination
                        background
                        layout="sizes,prev, pager, next, jumper, ->, total,slot"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        :page-count="10"
                        :total="total"
                        :page-sizes="pageSizes"
                        @current-change="getPage"
                        @size-change="sizeChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="订单详情" :visible="showDetail" @close="showDetail=false" class="order-detail">
            <div class="orderId">订单号：{{currentOrder.orderId}}</div>
            <div class="buyerName">买家昵称：{{decodeURI(currentOrder.buyerName)}}</div>
            <div class="buyerAddress">地址：{{decodeURI(currentOrder.buyerAddress)}}</div>
            <div class="buyerOpenid">openid：{{decodeURI(currentOrder.buyerOpenid)}}</div>
            <div class="orderAmount">总金额：{{decodeURI(currentOrder.orderAmount)}}元</div>
            <div class="payStatus">支付状态：{{currentOrder.payStatus==1?'已支付':'未支付'}}</div>
            <div class="orderStatus">订单状态：{{currentOrder.orderStatus==1?'已处理':'未处理'}}</div>
            <div class="createTime" v-if="currentOrder.createTime">
                订单创建时间：{{currentOrder.createTime.substring(0,19).replace('T',' ')}}
            </div>
            <div class="list-title">商品列表</div>
            <div class="content" v-for="(detail,index) in orderDetails" :key="index">
                <div class="productName">商品名称：{{detail.productName}}</div>
                <div class="count">数量：{{detail.count}}</div>
                <div class="productPrice">单价：{{detail.productPrice}}</div>
                <div class="productIcon">
                    <el-image :src="detail.productIcon"
                              :preview-src-list="[detail.productIcon]"
                              width="100"
                              height="100"
                    ></el-image>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">

    export default {
        data() {
            return {
                showDetail: false,
                showformData: true,
                showAddForm: false,
                showUpdateForm: false,
                orderDetails: '',
                search: '',
                currentPage: 1,
                pageSize: 10,
                total: 50,
                pageSizes: [10, 20, 30, 40, 50, 100],
                formData: [{
                    id: '',
                    name: '',
                    type: '',
                    price: '',
                    old_price: '',
                    image: '',
                    description: '',
                    rating: '',
                    status: '',
                }],
                currentOrder: {
                    name: '',
                    type: '',
                    price: '',
                    url: '',
                    description: '',
                    stock: '',
                    status: ''
                },
                loading: false
            }
        },
        methods: {
            orderDetail(index, order) {
                this.$http.get('/api/order/detail', {
                    params: {
                        orderId: order.orderId
                    }
                }).then((response) => {
                    this.orderDetails = response.data;
                });
                this.currentOrder = order;
                this.showDetail = true;
            },
            handleOrder(index, order) {
                this.$http.get("/api/order/handle", {
                    params: {
                        orderId: order.orderId
                    }
                }).then((response) => {
                    response = response.data;
                    if (response.code === 0) {
                        this.getPage();
                        this.$message({
                            message: response.msg,
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                    } else {
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            },
            handleDelete(index, product) {
                this.$http.get("/api/product/delete", {
                    params: {
                        id: product.id
                    }
                }).then((response) => {
                    response = response.data;
                    if (response.code === 0) {
                        this.getPage();
                        this.$message({
                            message: response.msg,
                            type: 'success',
                            customClass: 'alert-shadow'
                        });
                    } else {
                        this.$message({
                            message: response.msg,
                            type: 'error',
                            customClass: 'alert-shadow'
                        });
                    }
                })
            },
            getPage() {
                this.loading = true;
                this.$http.get("/api/orderList", {
                    params: {
                        page: this.currentPage,
                        size: this.pageSize,
                        orderId: this.search
                    }
                }).then((response) => {
                    this.loading = false;
                    this.total = response.data.total;
                    this.formData = response.data.records;
                })
            },
            refreshOrder(){
                this.$http.get("/api/orderList", {
                    params: {
                        page: this.currentPage,
                        size: this.pageSize,
                        orderId: this.search
                    }
                }).then((response) => {
                    this.loading = false;
                    this.total = response.data.total;
                    this.formData = response.data.records;
                })
            },
            sizeChange(size) {
                this.pageSize = size;
                this.getPage();
            },
            showformDataFrom() {
                this.showformData = false;
                this.showAddForm = true;
            },
            back() {
                this.getPage();
                this.showformData = true;
                this.showAddForm = false;
            },
            exit() {
                this.getPage();
                this.showformData = true;
                this.showUpdateForm = false;
            }
        },
        created() {
            this.getPage();
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .formData-management {
        margin 10px
        padding 10px
        box-shadow 0 0 10px darkgrey
        border-radius 10px

        .table-wrapper {
            .pagination-wrapper {
                width 600px
                margin auto
            }
        }
        .order-detail{
            div{
                padding 0 0 10px
            }
            .list-title{
                text-align center
                font-weight 700
                font-size 16px
                border-bottom 1px solid #8c939d
                border-top 1px solid #8c939d
                margin 10px 0
                padding 10px 0
            }
            .content{
                display inline-block
                width 50%
                .productIcon{
                    width 150px
                    height 150px
                }
            }
        }
    }
</style>
